import { Modal as MuiModal } from '@mui/material';
import { useTranslation } from 'react-i18next';
import IcClose from 'src/image/ic-close.svg';
import IcOpen from 'src/image/ic-order-dark.svg';
import style from './Image.module.scss';

/**
 * usage example:
 *
 * <button type="button" onClick={() => setOpen(true)}>Preview</button>
 * <Image
 *   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
 *   open={open}
 *   onClose={() => setOpen(false)}
 * />
 */

type Props = {
  src: string;
  open: boolean;
  onClose: () => void;
};

const Image = ({ src, open, onClose }: Props) => {
  const { t } = useTranslation();

  return (
    <MuiModal open={open} onClose={onClose} keepMounted>
      <>
        <div className={style.bar}>
          {/* <a className={style.open} href={src} target="_blank" rel="noreferrer" onClick={onClose}>
            <img src={IcOpen} />
            <div>{在新视窗开启}</div>
          </a> */}
          <img src={IcClose} onClick={onClose} className={style.close} />
        </div>
        <img className={style.img} src={src} />
      </>
    </MuiModal>
  );
};

export default Image;
